<!--
 * @Description: 欢迎页面
 * @Autor: 田力源
 * @Date: 2023-02-17 14:48:36
 * @LastEditors: 田力源
 * @LastEditTime: 2023-02-20 14:56:16
-->
<template>
    <div class="welcome">
        <div class="card-box">
            <div class="card handbook" @click="jumpRoute('handBook')">
                <img src="@/assets/images/welcome/pikaqiu.png" style="--c:#ffd624" class="img-scale">
                <div class="card-text">
                    <h2>宝可梦图鉴</h2>
                    <p>查询历代宝可梦详细信息、宝可梦获得方式、以及宝可梦的进化等...</p>
                </div>
            </div>
            <div class="card introduction" @click="jumpRoute('introduction')">
                <img src="@/assets/images/welcome/xiaohuolong.png" style="--c:#ff8800" class="img-scale">
                <div class="card-text">
                    <h2>游戏攻略</h2>
                    <p>历代宝可梦游戏的攻略，包含红绿宝石、心金、太阳月亮、let`s go 皮卡丘/伊布等...</p>
                </div>
            </div>
            <div class="card news" @click="jumpRoute('news')">
                <img src="@/assets/images/welcome/jienigui.png" style="--c:#96d4d0" class="img-scale">
                <div class="card-text">
                    <h2>新闻咨询</h2>
                    <p>最新的宝可梦相关的新闻资讯、让你成为最新宝可梦信息的掌握者。</p>
                </div>
            </div>
            <div class="card forum" @click="jumpRoute('forum')">
                <img src="@/assets/images/welcome/miaowazhongzi.png" style="--c:#7fcaab" class="img-scale">
                <div class="card-text">
                    <h2>宝可梦论坛</h2>
                    <p>在这里与众多其他宝可梦爱好者一起交流和探讨宝可梦相关的一切吧！</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';

const jumpRoute = (val:string) =>{
    router.push(`/${val}`)
}

</script>

<style scoped lang="scss">
.welcome{
    width: 100%;
    position: relative;
    z-index: 1;
    color: #333;
}
.card-box{
    width: 970px;
    height: 540px;
    margin: 180px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .card{
        width: 450px;
        height: 250px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        transition: all .3s;
        cursor: pointer;
        display: flex;
        align-items: center;
        .card-text{
            padding: 0 30px;
            h2{
                text-align: center;
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 25px;
            }
            p{
                text-indent: 2em;
                line-height: 20px;
            }
        }
        &:hover{
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            transform: translateY(-5px);
        }
        &:hover .img-scale{
            --f: 1.4;
        }
        .img-scale{
            margin-left: 20px;
            margin-top:-30px;
            display: flex;
        }
    }
}
</style>